웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
CSS media query의 스타일을 지정하는 방법입니다. 다만 다양한 방법으로 지정할 수 있습니다. 아래를 바주세요.
CSS에 미디어쿼리(mediaquery)를 적용하는 방법은 크게 두 가지가 있습니다. <link media="..."> 처럼 직접 screen 속성을 지정하여 외부 파일을 import하는 방법이 있구요 @screen을 사용해 style 내부에 추가해 사용하는 방법이 있습니다.
- <link>태그를 사용하여 설정하는 방법
- style 태그 내부에 @media를 사용하는 방법
각각 간단하게 코드로 나타내면 아래와 같습니다. 먼저 link 태그입니다.
일단 태그를 살펴보겠습니다.
위 방식은 자주 사용되는 방식은 아닙니다. 다만 적용 가능한 디바이스를 구분하여 파일로 만드는 경우 편리하게 사용할 수 있겠죠.
다음은 가장 일반적은 style 태그 내부에 @media 키워드를 사용하는 방법입니다.
뒤에 있는 and 기호를 사용하면 해당 디바이스의 범위를 중복하여 선언할 수가 있습니다. 몇 가지 예는 아래처럼 적용됨을 알 수 있죠.
중요한건 아니지만 이런 식으로 방법이 있다는 것만 알아두시면 좋겠습니다.
CSS에 미디어쿼리(mediaquery)를 적용하는 방법은 크게 두 가지가 있습니다. <link media="..."> 처럼 직접 screen 속성을 지정하여 외부 파일을 import하는 방법이 있구요 @screen을 사용해 style 내부에 추가해 사용하는 방법이 있습니다.
- <link>태그를 사용하여 설정하는 방법
- style 태그 내부에 @media를 사용하는 방법
각각 간단하게 코드로 나타내면 아래와 같습니다. 먼저 link 태그입니다.
! link 태그를 사용한 미디어쿼리
일단 태그를 살펴보겠습니다.
<link rel="stylesheet" media="screen and (max-device-width: 480px)">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="resp_mobile.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="resp_mobile.css">
위 방식은 자주 사용되는 방식은 아닙니다. 다만 적용 가능한 디바이스를 구분하여 파일로 만드는 경우 편리하게 사용할 수 있겠죠.
! @media 사용하는 방법
다음은 가장 일반적은 style 태그 내부에 @media 키워드를 사용하는 방법입니다.
<style type="text/css">
@media screen and (max-device-width: 480px) and ... {
body {
margin: 0 auto;
}
}
</style>
@media screen and (max-device-width: 480px) and ... {
body {
margin: 0 auto;
}
}
</style>
뒤에 있는 and 기호를 사용하면 해당 디바이스의 범위를 중복하여 선언할 수가 있습니다. 몇 가지 예는 아래처럼 적용됨을 알 수 있죠.
<style type="text/css">
@media screen and (max-device-width: 480px) and (orientation: portrait) {
body {
margin: 0 auto;
}
}
@media screen and (max-device-width: 480px) and (orientation: landscape) {
body {
margin: 0 auto;
}
}
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
body {
margin: 0 auto;
}
}
</style>
@media screen and (max-device-width: 480px) and (orientation: portrait) {
body {
margin: 0 auto;
}
}
@media screen and (max-device-width: 480px) and (orientation: landscape) {
body {
margin: 0 auto;
}
}
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
body {
margin: 0 auto;
}
}
</style>
중요한건 아니지만 이런 식으로 방법이 있다는 것만 알아두시면 좋겠습니다.
아래의 글도 찾고 계시지 않나요?